<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>易购商城--微信支付页</title>
	<link rel="icon" href="/assets/img/favicon.ico">


	<link rel="stylesheet" type="text/css" href="css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>

<body>

<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="top"></div>
<script type="text/javascript">$(".top").load("shortcut.html");</script>

<div class="cart py-container" id="payVm">
	<!--logoArea-->
	<div class="logoArea">
		<div class="fl logo"><span class="title">收银台</span></div>
	</div>
	<!--主内容-->

	<a href="payfail.html">支付失败演示页</a>
	<a href="paysuccess.html">支付成功演示页</a>


	<div class="checkout py-container  pay">
		<div class="checkout-tit">
			<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span></h4>
			<span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥17,654</em>元</span>
			<div class="clearfix"></div>
		</div>
		<div class="checkout-steps">
			<div class="fl weixin">微信支付</div>
			<div class="fl sao">
				<p class="red">二维码已过期，刷新页面重新获取二维码。</p>
				<div class="fl code">
					<div id="qrImage"></div>
					<div class="saosao">
						<p>请使用微信扫一扫</p>
						<p>扫描二维码支付</p>
					</div>
				</div>
				<div class="fl phone">

				</div>

			</div>
			<div class="clearfix"></div>
			<p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
		</div>
	</div>

</div>


<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.min.js"></script>
<script type="text/javascript">
	var payVm = new Vue({
		el:"#payVm",
		data:{
			ego,
			orderId:0,// 订单编号
		},
		created(){
			// 判断登录状态
			ego.http.get("/auth/verify").then(() => {
				// 获取订单编号
				this.orderId = ego.getUrlParam("orderId");
				// 获取请求链接
				ego.http.get("/order/order/url/" + this.orderId)
						.then(resp => {
							//生成付款二维码
							new QRCode(document.getElementById("qrImage"),{
								text:resp.data,
								width:250,
								height:250,
								colorDark: "#000000",
								colorLight: "#ffffff",
								correctLevel: QRCode.CorrectLevel.H
							});


							//开启定时任务，查询付款状态
							const taskId = setInterval(() => {
								ego.http.get("/order/order/state/" + this.orderId).then(resp => {
									let i = resp.data;
									if (i === 1){
										// 付款成功
										clearInterval(taskId);
										// 跳转到付款成功页
										location.href = "/paysuccess.html";
									} else if (i === 2){
										// 付款失败
										clearInterval(taskId);
										// 跳转到付款失败页
										location.href = "/payfail.html"
									}
								})
							},3000);
						})
			}).catch(() => {
				// 未登录，跳转至登录页
				location.href = "/login.html?returnUrl=" + location.href;
			})
		},
		components: {
			shortcut: () => import("./js/pages/shortcut.js")
		}
	});
</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script type="text/javascript">
	$(function(){
		$("ul.payType li").click(function(){
			$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
		})
	})
</script>
</body>

</html>
